<clr-modal [(clrModalOpen)]="opened">
    <h3 class="modal-title">{{'APP_ADD'|translate}}</h3>
    <div class="modal-body modal-height">
        <form clrForm #credentialForm='ngForm'>
            <clr-input-container>
                <label>{{"APP_NAME"|translate}}</label>
                <input clrInput [size]="32" maxlength="30" name="name" [(ngModel)]="item.name" pattern="{{namePattern}}"
                       required/>
                <clr-control-helper>{{'APP_REGION_NAME_HELPER'|translate}}</clr-control-helper>
                <clr-control-error>{{'APP_REGION_NAME_HELPER'|translate}}</clr-control-error>
            </clr-input-container>
            <clr-input-container>
                <label>{{"APP_USERNAME"|translate}}</label>
                <input clrInput [size]="32" id="username" name="username" [(ngModel)]="item.username" required/>
            </clr-input-container>
            <clr-radio-container>
                <label>{{"APP_TYPE"|translate}}</label>
                <clr-radio-wrapper>
                    <input type="radio" clrRadio name="options" value="password" [(ngModel)]="item.type"/>
                    <label>password</label>
                </clr-radio-wrapper>
                <clr-radio-wrapper>
                    <input type="radio" clrRadio name="options" value="privateKey" [(ngModel)]="item.type"/>
                    <label>privateKey</label>
                </clr-radio-wrapper>
            </clr-radio-container>
            <clr-input-container *ngIf="item.type == 'password'">
                <label>{{"APP_PASSWORD"|translate}}</label>
                <input clrInput  type="password" size="32" name="password" [(ngModel)]="item.password"/>
            </clr-input-container>
            <clr-textarea-container *ngIf="item.type == 'privateKey'">
                <label>{{'APP_PRIVATE_KEY'|translate}}</label>
                <textarea clrTextarea size="32" [(ngModel)]="item.privateKey" name="private_key" required></textarea>
            </clr-textarea-container>
        </form>
        <app-modal-alert></app-modal-alert>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()"
                [disabled]="isSubmitGoing">{{'APP_CANCEL'|translate}}</button>
        <button type="submit" class="btn btn-primary" (click)="onSubmit()" [clrLoading]="isSubmitGoing"
                [disabled]="credentialForm.invalid">{{'APP_COMMIT'|translate}}
        </button>
    </div>
</clr-modal>
